<template>
	<view class="pc_flow">
		<view class="pc_flow_left">
			<view class="pc_flow_content" v-for="(item,index) in dataleft" :key="index"
				:style="index>0?'margin-top:40rpx;':''" @click="contact(item)">
				<image v-if="index%2==0" class="pc_img_max" mode="aspectFill" :src="field&&item[field]?item[field]:''"
					:style="limitation?'height:400rpx;':''"></image>
				<image v-else class="pc_img_min" mode="aspectFill" :src="field&&item[field]?item[field]:''"
					:style="limitation?'height:300rpx;':''"></image>
				<slot :row="item" :rowIndex="index*2"></slot>
			</view>
		</view>
		<view class="pc_flow_right">
			<view class="pc_flow_content" v-for="(item,index) in dataright" :key="index"
				:style="index>0?'margin-top:40rpx;':''" @click="contact(item)">
				<image v-if="index%2!=0" mode="aspectFill" class="pc_img_max" :src="field&&item[field]?item[field]:''"
					:style="limitation?'height:400rpx;':''"></image>
				<image v-else class="pc_img_min" mode="aspectFill" :src="field&&item[field]?item[field]:''"
					:style="limitation?'height:300rpx;':''"></image>
				<slot :row="item" :rowIndex="index*2+1"></slot>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: 'pc-flow',
		props: {
			data: {
				type: Array,
				default: () => ([])
			},
			field: {
				type: String,
				default: ''
			},
			limitation: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				dataleft: [],
				dataright: []
			}
		},
		watch: {
			data: {
				handler() {
					this.dataleft = []
					this.dataright = []
					try {
						let arr = JSON.parse(JSON.stringify(this.data));
						arr.forEach((item, index) => {
							if (index % 2 == 0) {
								this.dataleft.push(item)
							} else {
								this.dataright.push(item)
							}
						})
					} catch {
						console.error('pc-flow组件数据转换出错,请检查')
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			contact(item) {
				this.$emit('contact', item)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.pc_flow {
		width: calc(100% - 40upx);
		padding: 20upx;
		overflow: hidden;
		display: flex;

		.pc_flow_left,
		.pc_flow_right {
			width: 50%;
			flex: 1;
			overflow: hidden;

			.pc_img_max {
				width: 100%;
				border-radius: 20upx;
				overflow: hidden;
			}

			.pc_img_min {
				width: 100%;
				border-radius: 20upx;
				overflow: hidden;
			}
		}

		.pc_flow_right {
			margin-left: 20upx;
		}
	}
</style>